<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
                <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div>
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="{% url 'allinfo' %}">全部学生信息</a></li>
        <li role="presentation"><a href="{% url 'alltask' %}">全部任务</a></li>
        <li role="presentation"><a href="{% url 'addtask' %}">添加任务</a></li>
        <li role="presentation"><a href="{% url 'lsupdate' %}">修改学生信息</a></li>
        <li role="presentation" class="active"><a href="{% url 'wcqk' %}">学生完成情况</a></li>
        <li role="presentation"><a href="{% url 'login' %}">退出</a></li>
    </ul>
</div>

<div>
    <table class="table table-hover">

        <thead>
            <tr>
                <th>姓名</th>
                <th>完成情况</th>
                <th>任务总数</th>

            </tr>
        </thead>
        <tbody>
        {% for s_name,t_len in dic.items %}
            <tr>
                <td>{{ s_name }}</td>
            {% for foo in t_len %}
                <td>{{ foo }}个</td>
            {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>
<div id="bar" style="width:1000px; height:600px;"></div>
</div>
{#<script>    #}
{#function changeVal(obj){#}
{#    var val=document.getElementById("btn");#}
{#    if(val.innerHTML=="未完成"){#}
{#        obj.innerHTML="已完成";#}
{#    }else if(val.innerHTML=="已完成"){#}
{#        obj.innerHTML="未完成";#}
{#    }#}
{#}#}
{#</script>#}
  <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
{#    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>#}
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>


    <script>
            var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});

            $(
                function () {
                    fetchData(chart);
                }
            );

            function fetchData() {
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:8000/Bar/",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result.data);
                    }
                });
            }
        </script>

</body>
</html>